<template>
	<view class="addBankCard">
		<view class="header">
			<view class="head">
				<text>请绑定和实名认证姓名一致的储蓄银行卡</text>
			</view>
			
			<view class="info">
					<view class="item">
						<text class="left">持卡人</text>
						<input class="uni-input"  type="text" disabled :placeholder='name' placeholder-style="color:#cccccc" >
					</view>
					<view class="item">
						<text class="left">卡号</text>
						<input class="uni-input"  type="number" v-model="cardNumber" placeholder='请输入储蓄卡号，信用卡不能绑定成功' placeholder-style="color:#cccccc" @input='changeBJ = true'>
					</view>
					
					<view class="item">
						<text class="left">银行</text>
						<view class="right" @click="choose">
								<text class='black' v-if="pickerText">{{pickerText}}</text>
								<view class="icon">
									<text v-if="!pickerText">请选择银行</text>
									<uni-icon type="arrowright" size="20"></uni-icon>
								</view>
						</view>
					</view>
			
					<view class="item">
						<text class="left">网点</text>
						<input class="uni-input"  type="text" v-model="bankAddress" placeholder='请输入银行网点名称' placeholder-style="color:#cccccc" @input='changeBJ = true'>
					</view>
					 
			</view>	
			
			
		</view>
			
		<view class="footer">
			<view class="next_btn" :class="{activeBj:1}" @click="bind">绑定</view>
		</view>
		
		
		<mpvue-picker :themeColor="themeColor" ref="mpvuePicker" :mode="mode" :deepLength="deepLength" :pickerValueDefault="pickerValueDefault"
		 @onConfirm="onConfirm" @onCancel="onCancel" :pickerValueArray="pickerValueArray"></mpvue-picker>
	</view>
</template>

<script>
import mpvuePicker from '../../../components/mpvue-picker/mpvuePicker.vue';
import uniIcon from '@/components/uni-icon.vue';
var util = require('../../../common/util.js');
export default {
    data() {
        return {
            cardNumber: '',
            name:'',
            pickerText: '',
            pickerValue: '',
            active: true,
            changeBJ: false,
            black: false,
            bankAddress: '',
            pickerValueArray: [],
            themeColor: '#007AFF',
            mode: 'selector',
            deepLength: 1,
            pickerValueDefault: [0]
        };
    },
    onLoad(e) {
        this.getBankList();
		this.name = e.name
    },
    methods: {
        onCancel(e) {
            // console.log(e);
        },
        onConfirm(e) {
            console.log(e);
            this.pickerText = e.label;
            this.pickerValue = e.value;
        },
        choose() {
            this.$refs.mpvuePicker.show();
        },
        getBankList() {
            util.ajax(
                'tagList',
                {
                    tagType: 'bank',
                    token: util.getUserToken()
                },
                data => {
                    let json = data.data;
                    if (json.status) {
                        console.log(json.data);
                        let arr = json.data;
                        arr.map((item, index) => {
                            this.pickerValueArray.push({ label: item.name, value: item.id });
                        });
                        // console.log(this.pickerValueArray )
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        },
        bind() {
            if (!this.cardNumber) {
                uni.showToast({
                    title: '银行卡号不能为空',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }
            if (!this.pickerText) {
                uni.showToast({
                    title: '请选择绑定银行',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }

            if (!this.bankAddress) {
                uni.showToast({
                    title: '请输入银行网点名称',
                    icon: 'none',
                    duration: 1000
                });
                return;
            }

            uni.showLoading({
                title: '绑定中...'
            });

            util.ajax(
                'userBankEdit',
                {
                    bankId: '',
                    tagId: this.pickerValue,
                    name: this.name,
                    number: this.cardNumber,
                    bankAddress: this.bankAddress,
                    token: util.getUserToken()
                },
                data => {
                    uni.hideLoading();
                    let json = data.data;
                    if (json.status) {
                        setTimeout(() => {
                            uni.reLaunch({
                                url: './addBankSuccess'
                            });
                        }, 1000);
                    } else {
                        uni.showToast({
                            title: json.message,
                            icon: 'none',
                            duration: 1000
                        });
                    }
                },
                (data, code) => {
                    console.log(data);
                    uni.showToast({
                        title: JSON.stringify(data.message),
                        icon: 'none',
                        duration: 1000
                    });
                }
            );
        }
    },
    components: {
        uniIcon,
        mpvuePicker
    }
};
</script>

<style lang="less">
@import '../../../common/icon.css';
@import '../../../common/uni.css';
.addBankCard {
    flex: 1;
    flex-direction: column;
    width: 100%;
    height: auto;
    .header {
        flex-direction: column;
        .head {
            color: #333333;
            font-size: 26upx;
            padding: 30upx 30upx 60upx;
            box-sizing: border-box;
            align-content: center;
        }
        .info {
            flex-direction: column;
            background: white;
            padding: 0 30upx;
            box-sizing: border-box;
            .item {
                flex-grow: 1;
                border-bottom: 1px solid #eeeeee;
                height: 100upx;
                align-items: center;
                .left {
                    width: 15%;
                    display: flex;
                    align-items: center;
                    color: #333333;
                    font-size: 30upx;
                }
                input {
                    font-size: 30upx;
                }
                .right {
                    padding: 15upx 25upx;
                    width: 85%;
                    justify-content: flex-end;

                    align-items: center;
                    color: #cccccc;
                    font-size: 30upx;
                    .black {
                        color: #333333;
                    }
                    .icon {
                        align-items: center;
                    }
                }
                .between {
                    justify-content: space-between;
                }
            }
        }
    }
    .footer {
        padding: 0 30upx;
        box-sizing: border-box;
        flex-direction: column;
        width: 100%;
        .next_btn {
            background: #ff1268;
            color: white;
            font-size: 34upx;
            width: 100%;
            height: 100upx;
            justify-content: center;
            align-items: center;
            border-radius: 5upx;
            margin: 120upx auto 0;
            background: -webkit-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -o-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -moz-linear-gradient(to right, #fabde6, #ffa0c2);
            background: -mos-linear-gradient(to right, #fabde6, #ffa0c2);
            background: linear-gradient(to right, #fabde6, #ffa0c2);
        }
        .activeBj {
            background: -webkit-linear-gradient(to right, #ff48ac, #ff1268);
            background: -o-linear-gradient(to right, #ff48ac, #ff1268);
            background: -moz-linear-gradient(to right, #ff48ac, #ff1268);
            background: -mos-linear-gradient(to right, #ff48ac, #ff1268);
            background: linear-gradient(to right, #ff48ac, #ff1268);
            color: white;
        }
    }
}
</style>
